import React, {useEffect} from 'react';
import {Form, Modal, Input, Button, Space} from "antd";
import {useAppDispatch} from "@/hooks";
import {postHospitalSetAsync} from "@/store/slice/hosp";
type TModal = {
    isModalVisible: boolean,
    setIsModalVisible: React.Dispatch<React.SetStateAction<boolean>>,
    modalTitle: string
    hospitalSetInfo: any
}
function HospitalModal(props:TModal) {
    const dispatch = useAppDispatch();
    const [form] = Form.useForm();

    useEffect(() => {
        // console.log(props.hospitalSetInfo);
        //空对象也会进入 因为{}为true
        /*
        * 必须要写最外层的判断，当有值的时候才能进入判断，否则null.id,会报错
        * */
        if (props.hospitalSetInfo) {
            //form.setFieldsValue()设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入）
            if (props.hospitalSetInfo.id) {//如果有值，才设置，有值则为修改医院设置，无值则为添加医院设置
                form.setFieldsValue(props.hospitalSetInfo);
            } else {//添加，把表单清空
                form.resetFields();
            }
        }
    },[props.hospitalSetInfo])
    return (
        <Modal title={props.modalTitle}
               visible={props.isModalVisible}
               footer={null} //底部内容，当不需要默认底部按钮时，可以设为 footer={null}
               maskClosable={false}	//点击蒙层是否允许关闭
               // onOk={handleOk}
               // onCancel={handleCancel}
               onCancel={() => {props.setIsModalVisible(false)}}	//点击遮罩层或右上角叉或取消按钮的回调
        >
            <Form
                form={form}
                name="basic"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                initialValues={{ remember: true }}
                onFinish={(values) => {
                    dispatch(postHospitalSetAsync(values));
                    form.resetFields();//清空表单
                     props.setIsModalVisible(false);
                }}
                // onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    hidden={true}
                    label="ID"
                    name="id"

                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="医院名称"
                    name="hosname"
                    rules={[{
                        required: true,
                        min:2,
                        max:20,
                        message: '请输入医院名称!长度为2-15' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="医院编号"
                    name="hoscode"
                    rules={[{
                        required: true,
                        message: '请输入医院编号'}]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="API基础地址"
                    name="apiUrl"
                    rules={[{
                        required: true,
                        pattern:/^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i,
                        message: '请输入正确的API基础地址'}]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="联系人姓名"
                    name="contactsName"
                    rules={[{
                        required: true,
                        message: '请输入正确的联系人姓名'}]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="联系人手机"
                    name="contactsPhone"
                    rules={[{
                        required: true,
                        pattern:/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                        message: '请输入正确的联系人手机'}]}
                >
                    <Input />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 5, span: 19 }}>
                    <Space>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                        <Button onClick={() => {form.resetFields();}} htmlType="button">
                            重置
                        </Button>
                    </Space>

                </Form.Item>
            </Form>
        </Modal>
    );
}

export default HospitalModal;